<template>
  <div class="container">
    <h2 :class="{ red: true, thin: flag }">App组件</h2>
    <!-- <h2 :class="['red', flag ? 'thin' : '']">App组件</h2> -->
    <button @click="flag = !flag">切换类名</button>

    <ul :style="{ padding: '5px', margin: '10px', border: 'solid 2px red' }">
      <li>hello world</li>
    </ul>

    <my-left></my-left>
    <my-right></my-right>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
  data () {
    return {
      flag: true
    }
  },
  components: { MyLeft, MyRight },
}
</script>

<style lang="less" scoped>
.red {
  color: red;
}
.thin {
  font-weight: 200;
}

// 样式穿透，在父组件中，修改子组件的样式
.container /deep/ p {
  background-color: cornflowerblue;
}
</style>